<template>
  <div>
    <p>{{ msg }}</p>
    <p @click="handler">{{ obj }}</p>
    <p>{{ c * 100 }}</p>
    <p>{{ x }}</p>
    <p>{{ y }}</p>
    <p>{{ z }}</p>
  </div>
</template>

<script>
export default {
  props: {
    msg: String,
    obj: Object,
    c: [String, Number],
    x: {
      type: String,
      required: true,
    },
    y: {
      type: String,
      default: "100",
    },
    z: {
      type: Number,
      validator: function (value) {
        return value % 2 == 0;
      },
    },
  },
  methods: {
    handler: function () {
      var xxx = this.obj;
      xxx.age += 1;
    },
  },
};
// 1 这个 prop 用来传递一个初始值 用props做 data初始值
// 2 这个 prop 以一种原始的值传入且需要进行转换  用props派生其他值（计算属性）
</script>


<style>
</style>